<script setup lang="ts">
import { ref} from 'vue';
import { userStore,systemStore } from '@/store';
import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router';
import sHeader from '@/views/header.vue'
import sFooter from '@/views/footer.vue'
import sMenu from '@/components/menu.vue'
import sMenutabs from '@/components/menutabs.vue'
const userstore = userStore();
const asidewidth = ref(200);
const headerheight = ref(60)
const footerheight = ref(0)
const systemstore = systemStore();
const route = useRoute();
userstore.getmenus();
const {menus} = storeToRefs(userstore);
</script>

<template>
  <el-container class="container">
    <el-header :style="{width:`100vw`,height:`${headerheight}px`,padding:0}">
      <s-header></s-header>
    </el-header>
    <el-container>
      <el-aside class="aside" :style="{width:systemstore.expandbool?'64px':`${asidewidth}px`,height:`calc(100vh - ${headerheight+footerheight}px)`}">
          <s-menu :menus="menus" v-model:expand="systemstore.expandbool"></s-menu>
      </el-aside>
      <el-main class="main" :style="{width:systemstore.expandbool?`calc(100vw - 64px)`:`calc(100vw - ${asidewidth}px)`,
      height:`calc(100vh - ${footerheight+headerheight}px)`,padding:0,transition:'all 0.3s linear'}">
        <sMenutabs style="margin: 10px 10px 0px 10px;width:calc(100% - 20px);height: 40px;"></sMenutabs>
        <router-view v-if="route.meta.keep_alive" v-slot="{Component}" style="margin: 0px 10px 10px 10px;width:calc(100% - 20px);height:calc(100% - 60px);background-color: white;">
          <transition name="fade" mode="out-in">
            <keep-alive>
              <component  :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
        <router-view v-else v-slot="{Component}" style="margin: 0px 10px 10px 10px;width:calc(100% - 20px);height:calc(100% - 60px);background-color: white;">
          <transition name="fade" mode="out-in">
            <component  :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
    <el-footer :style="{width:'100vw',height:`${footerheight}px`,padding:0}">
      <s-footer :style="{width:'100vw',height:`${footerheight}px`,padding:0}"></s-footer>
    </el-footer>
  </el-container>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.aside {
  box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
  background: white;
}
/* .main{
   box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3); 
} */
.container{
  background: url("./../assets/1.jpg");
}
</style>